<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主布局</title>
    <style>
        *{padding: 0;margin: 0;}
        ul{list-style: none;}

        .g-container{
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 搜索区域 */
        .g-container .g-search{
            height: 40px;
            background-color: pink;
        }
        /* 内容区域 */
        .g-container .g-content{
            flex: 1;
            height: calc(100vh - 40px - 60px);
            overflow: scroll;
        }

        .g-container .g-content .swiper{
            height: 200px;
            background-color: green;
        }

        .g-container .g-content .category{
            height: 150px;
            background-color: blueviolet;
        }
        .g-container .g-content .list{
            height: 400px;
            background-color: burlywood;
        }

        /* 底部区域 */
        .g-container .g-footer{
            height: 60px;
            background-color: pink;
        }

    </style>
</head>

<body>
    <div class="g-container">
        <!-- 搜索框区域 -->
        <div class="g-search">搜索框区域</div>
        <!-- 内容区域 -->
        <div class="g-content">
            <!-- 轮播区域 -->
            <div class="swiper">轮播</div>
            <!-- 分类区域 -->
            <div class="category">分类</div>
            <!-- 列表区域 -->
            <div class="list">列表</div>
        </div>
        <!-- 底部区域 -->
        <div class="g-footer">底部区域</div>
    </div>
</body>

</html>